<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" href="../../css/allBase.css">
		<link rel="stylesheet" type="text/css" href="../../css/feedback.css" />
		<link rel="stylesheet" href="../../css/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" href="../../css/tables.css">
		<link rel="stylesheet" href="../../css/dialog.css" />
        <link href="../../js/riqi/bootstrap.min.css" rel="stylesheet">
        <link href="../../js/riqi/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="all" href="../../js/riqi/daterangepicker-bs3.css" />

		<![endif]-->
    <title>结果</title>

</head>
<body>
	<div class="classifiedBox">
	     <div class="classified-search">
             <form class="form-horizontal" style="margin-bottom: 5px;">
                 <fieldset>
                  <div class="control-group">
                    <div class="controls">
                    <p style="float: left;line-height: 34px;">日期范围：</p>
                     <div class="input-prepend input-group" style="float: left;width:150px;">
                     	<!--<div id="reservation" class="pull-left dateRange" style="width: 210px;background-color: #eee;border: 1px solid #ccc;border-radius: 4px;padding: 2px 7px;margin-top: 4px;">  
	                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>  
	                        <span id="searchDateRange"></span>  
	                        <b class="caret"></b>  -->
	                    <span class="add-on input-group-addon">
                     		<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                     	</span>
                     	<input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-7-21 - 2017-7-21" />
                   </div>
                     <p class="meici" style="float:left;color:red;line-height: 34px;">（每次最多选取60天）</p>
                    </div>
                  </div>
                 </fieldset>
              </form>
	        <div class="purchase-situation">
	            产品分类：
	            <span class="selected" id="旧版考试宝典">旧版考试宝典</span><!--<span id="游客数">游客数</span><span id="游客注册数">游客注册数</span>（*单选）-->
	        </div>
	        <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
	        <!--<div class="refresh">
	            <img src="../../img/refresh.png" alt="">
	            <a class="tabReload" href="#">刷新当前</a>
	        </div>-->
	    </div>
	</div>
    <!--数据展示结果-->
    <img class="loadingimg" src="../../img/loading.gif" style="position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto;display: none;" />
   	<div class="miancontent" style="display: none;">
	    <div class="tableBox" >
	    	<div class="title" style="width:100%">
	    		<p>“切换新版”按钮点击量的占比图与趋势图</p>
	    		<ul class="xuanze1">
	    			<li class="cishu checked">按次数</li>
	    			<li class="renshu">按人数</li>
	    		</ul>
	    		<ul class="title1">
	    			<li id="main1" class="main"></li>
	    		</ul>
	    		<ul class="title2">
	    			<li id="main2" class="main"></li>
	    		</ul>
	    	</div>
	    </div>	
   	</div>
    <script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
    <!--<script src="../js/charts/Chart.js"></script>-->
    <script type="text/javascript" src="../../js/base/echarts.common.min.js"></script>
      <script type="text/javascript" src="../../js/base/echarts.js"></script>
    <script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="../../js/base/ajax.js"></script>
    <script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>
	<script type="text/javascript" src="../../js/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../../js/base/dialog.js"></script>
    <script type="text/javascript" src="../../js/riqi/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/riqi/moment.js"></script>
    <script type="text/javascript" src="../../js/riqi/daterangepicker.js"></script>
    <script type="text/javascript">
            var myDate = new Date();//添加日期
           	y=myDate.getFullYear(); 
           	m=myDate.getMonth()+1;
           	d=myDate.getDate()-1;
           	if(myDate.getDate()==1){
           		 d=myDate.getDate();
           	}
           	dqy=y+"-"+m+"-"+d;
           	$('#reservation').val(dqy+" - "+dqy)
           $(document).ready(function() {
                $('#reservation').daterangepicker({
                    maxDate : moment(), //最大时间   
                    dateLimit : {  
                        days : 60  
                    }, //起止时间的最大间隔  
                    showDropdowns : true,  
                    showWeekNumbers : false, //是否显示第几周  
                    timePicker : false, //是否显示小时和分钟  
                    timePickerIncrement : 60, //时间的增量，单位为分钟  
                    timePicker12Hour : false, //是否使用12小时制来显示时间  
                    ranges : {  
                        //'最近1小时': [moment().subtract('hours',1), moment()],  
                        '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                        '最近7日': [moment().subtract('days', 6), moment()],  
                        '最近30日': [moment().subtract('days', 29), moment()],  
                        '最近60日': [moment().subtract('days', 59), moment()]  
                    },  
                    opens : 'right', //日期选择框的弹出位置  
                    buttonClasses : [ 'btn btn-default' ],  
                    applyClass : 'btn-small btn-primary blue',  
                    cancelClass : 'btn-small',  
                    format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式  
                    separator : ' - ',  
                    locale : {  
                        applyLabel : '确定',  
                        cancelLabel : '取消',  
                        fromLabel : '从',  
                        toLabel : '到',  
                        weekLabel: 'W',
                        customRangeLabel : '选择时间',  
                        daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
                        monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',  
                                '七月', '八月', '九月', '十月', '十一月', '十二月' ]
//                          firstDay : 1  
                    }  
                }, function(start, end, label) {//格式化日期显示框  
                    $('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));  
                }); 
				
           });
            $(document).on('click','.applyBtn',function(){//判断日期是否是在60天之内
				var val=$('#reservation').val().split(' - ');
	          	var endTime=new Date(val[1]);
	          	var startTime=new Date(val[0]);
	          	if(endTime - startTime>5270400000){
	          		$('.daterangepicker').css('display','block')
	          		G_Prg.alert('每次最多选取60天');
	          	}
           })
            var hTimes = ["0点","1点","2点","3点","4点","5点","6点","7点","8点","9点",
				"10点","11点","12点","13点","14点","15点","16点","17点","18点","19点",
				"20点","21点","22点","23点"
				];
			var problemNum;
            this.init = function(){
                var option = {};
                var dd=new Date();
                var m=dd.getMonth()+1;
                var d1=dd.getDate();
                //var d2=dd.getDate();
                var days1=G_Prg.GetDay(dd.getFullYear(),m,d1);
                var days2=  dd.getFullYear()+'-'+m+'-'+d1;
                $('#logmin').val(days1);
                $('#logmax').val(days1);
                allclick();//点击事件

            }

            /**************************************************
             * 功能：点击事件
             * 函数名：allclick（）
             * 传入参数：无
             * 创建人：刘淳昊 2017-03-13
             *************************************************/
            function allclick() {
                //刷新页面
                $('.refresh').on('click',function(){
                    window.location.reload();
                })
                //切换科目选项 (全选反选)
                $('.productL span').on('click',function(){
                 	if($(this).attr('id')=='allsingleproducts'){
						$(this).addClass('selected').siblings().removeClass('selected');
					}else{ 
					   if($(this).hasClass('selected')){
	                       $(this).removeClass('selected');
	                       $('.productL span').eq(0).removeClass('selected');
	                   }else{
	                       $(this).addClass('selected')
	                       $('.productL span').eq(0).removeClass('selected');
	                   }
					}
		
                })
                
                
                $('#btncx').on('click',function(){
	                var val=$('#reservation').val().split(' - ');
	                var startTime=new Date(val[0]);
	                var endTime=new Date(val[1]);
	                if(endTime-startTime<5270400000){
	                	$('.setpNum li').html('0');
	                    $('.loadingimg').show();
	                	setTimeout(function(){
	                		$('.loadingimg').hide();
	                		$('.miancontent').show();
							allFeedback('次数');
//							problemfeedback();  //试题反馈原因分类，以及总数统计
							//查询结果
//              			errorfeedBack();
	                	},500)
	                }else{
	               		G_Prg.alert('每次最多选取60天',function(){
			
		                });
	                }
                })

            }
             /**************************************************
             * 功能：错误反馈 /api/new/feedback
             * 函数名：feedback
             * 传入参数：startDay    开始时间
             *         endDay      结束时间
             *         clients     所选单品
             *         userType    购买未购买[0未购买、1购买、2合计]
             * 创建人：刘淳昊 2017-03-20
             *************************************************/
            function allFeedback(numData){
                var val=$('#reservation').val().split(' - ');
                var startTime = val[0];
                var endTime = val[1];
                clients=[];
                clientsName=[];
                $('.productL .selected').each(function(){
                	clients.push($(this).attr('id'));
                	clientsName.push($(this).text());
                });
                var times=[];
                getAll(startTime,endTime);
                function getAll(begin,end){
				    var ab = begin.split("-");
				    var ae = end.split("-");
				    var db = new Date();
				    db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
				    var de = new Date();
				    de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
				    var unixDb=db.getTime();
				    var unixDe=de.getTime();
				    for(var k=unixDb;k<=unixDe;){
					    times.push((new Date(parseInt(k))).format());
					    k=k+24*60*60*1000;
				    }
				}
                var clientsData = JSON.stringify(clients);
                var _url='/api/new/hjChangePopupCount?startDay='+startTime+'&endDay='+endTime+'&dataType='+numData;
                G_AjaxApi.get(_url,false,function(json){
                    var jsonData = JSON.parse(json);
                    if(jsonData.status ==200){
                        if(jsonData.data ==[ ]){
                            alert('数据为空');
                        }else{
                        	$('.titleNum').empty();
//                      	for(var i=0;i<jsonData.data.lineData.length;i++){
//                      		if(jsonData.data.lineData[i].name == 1){ //答题页的错题反馈折线
//                      			examData1.push(jsonData.data.lineData[i]);
//                      			examData2.push(jsonData.data.pieData[i]);
//                      		}else if(jsonData.data.lineData[i].name == 0){ //我的消息的错题反馈折线
//                      			myMsgData1.push(jsonData.data.lineData[i])
//                      			myMsgData2.push(jsonData.data.pieData[i]);
//                      		}
//                      		
//                      	}
                        	examLine(jsonData.data.lineData,times,clientsName);
                            examPie(jsonData.data.pieData,clientsName);
                            $('.loadingimg').hide();
                        }

                    }else {
                        console.log(jsonData.status)
                    }
                })

            }
            //答题页}
             $('.xuanze1 li').click(function(){
                	if(!$(this).hasClass('checked')){
                		$(this).css({
                    		'color':'#fff',
							'background': '#55bde4',
							'text-align': 'center',
							'line-height': '30px'
                    	}).siblings().css({'color': '#55bde4','background': '#fff'})
                      allFeedback('人数')
                	}else{
                		$(this).css({
                    		'color':'#fff',
							'background': '#55bde4',
							'text-align': 'center',
							'line-height': '30px'
                    	}).siblings().css({'color': '#55bde4','background': '#fff'}) 
                      allFeedback('次数')
                	}
            })
           
            /**************************************************
             * 功能：折线图
             * 函数名：examLine（）
             * 传入参数：无
             *************************************************/
            function examLine(jsonData,time,clientsName){
                var series =[];
                var xAxis =[];
                var btn=['未购买','购买','全部']
                var StyleSin = function(){
                    return {
                        data:[],
                        splitLine:{show:false},
                        boundaryGap:false,
                        axisLabel: {
							show: true,
							textStyle: {
								color: '#000',
								fontFamily: "microsoft yahei",
								fontSize: 12
							}
						}
						
                    }
                };
                var Item = function(){
                    return {
                        name:'',
                        type:'line',
                        itemStyle: {normal: {}},
                        label: {normal: {}},
                        data:[]
                    }
                };
//              var numData=jsonData[0].data.split(',');
                for(var i =0;i<jsonData.length;i++){
//              	 以日期为x轴
                    var it = new Item();
                    var style = new StyleSin();
                    it.name = btn[i];
                    it.type = 'line';
                    it.data = jsonData[i].data.split(',');
                    style.data = time;
                    style.type = 'category';
                    style.boundaryGap = false;
                    style.name='(时间)';
                    series.push(it);// 将item放在series中
                    xAxis.push(style);
               }
                // 基于准备好的dom，初始化echarts实例
                swChart = echarts.init(document.getElementById('main1'));
                // 指定图表的配置项和数据
                option = {
                    title: {
                    	x:'20',
                        text: ''
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:btn
                    },
                     grid: {
				        left: '5%',
				        bottom: '2%',
				        containLabel: true
				    },
                    yAxis: {
                        type : 'value'
                    },
                    series: []
                    
                };
                option.series = series;
                option.xAxis = [{  //修改上面的日期
             	   axisLabel:{show:true},
	               textStyle:{color:"#000",fontFamily:"microsoft yahei",fontSize:12},
	               boundaryGap:false,
	               name:"(时间)",
	               type:"category",
                   data:xAxis[0].data
              }];
                // 使用刚指定的配置项和数据显示图表。
                swChart.setOption(option);
            }
             /**************************************************
             * 功能：饼状图
             * 函数名：examPie（）
             * 传入参数：无
             *************************************************/
              function examPie(jsonData,clientsName){
            	var pieData =[];
            	var btn=['未购买','购买','全部'];
            	for(var i=0;i<jsonData.length;i++){
            		var value = {
            			'name': btn[i],
            		  	'value':jsonData[i].count
            		};
            		pieData.push(value);
            	}
            	// 基于准备好的dom，初始化echarts实例
                hwChart = echarts.init(document.getElementById('main2'));
            	var option1 = {
					title : {
					    text: '',
					   	x:'center'
					},
					tooltip : {
					    trigger: 'item',
					    formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
					    orient : 'vertical',
					    x : 'right',
					    data:clientsName
					},
					toolbox: {
					    show : false,
					    feature : {
					        mark : {show: true},
					        dataView : {show: true, readOnly: false},
					        magicType : {
					            show: true, 
					            type: ['pie', 'funnel'],
					            option: {
					                funnel: {
					                    x: '10%',
					                    width: '50%',
					                    funnelAlign: 'left',
					                    max: 1548
					                }
					            }
					        },
					        restore : {show: true},
					        saveAsImage : {show: true}
					    }
					},
					calculable : true,
					series : [
					    {
					        name:'来源',
					        type:'pie',
					       	radius : '60%',
					        center: ['45%', '50%'],
					        data:pieData,
					        itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 10,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
					    }
					]
				};
            	//使用刚指定的配置项和数据显示图表。
                hwChart.setOption(option1);
            }
        /**********************************************************
        * 功能：获取日期区间
        * ********************************************************/
        function getDate(datestr){
            var temp = datestr.split("-");
            var date = new Date(temp[0],temp[1],temp[2]);
            return date;
        }
        Date.prototype.format=function (){
		    var s='';
		    s+=this.getFullYear()+'-';          // 获取年份。
		    s+=(this.getMonth()+1)+"-";         // 获取月份。
		    s+= this.getDate();                 // 获取日。
		    return(s);                          // 返回日期。
	    };
		function getAll(begin,end){
			times=[];
		    var ab = begin.split("-");
		    var ae = end.split("-");
		    var db = new Date();
		    db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
		    var de = new Date();
		    de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
		    var unixDb=db.getTime();
		    var unixDe=de.getTime();
		    for(var k=unixDb;k<=unixDe;){
			    times.push((new Date(parseInt(k))).format());
			    k=k+24*60*60*1000;
		    }
		}

        init();


    </script>
</body>
</html>